import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  TextInput,
  Switch,
  LogBox,
  Alert,
} from 'react-native';
import {userLogin, userAccount} from '../../api/index.js';
import {setStore, getStore, removeStore} from '../../utils/storage';
import {editUser} from '../../redux/actions/UserAction.js';
const logoImage = require('../../assets/logo.png');
const Login = ({navigation, dispatch}) => {
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');
  const [isEnabled, setIsEnabled] = useState(true);

  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  const loginHandle = async () => {
    // LogBox.ignoreLogs(['account, password']);
    console.log(account, password);
    const res = await userLogin({
      account: account,
      password: password,
    });
    // console.log(res);
    if (res.code === 1000) {
      if (isEnabled) {
        await setStore('account', account);
      } else {
        await removeStore('account');
      }
      await setStore('token', res.data.token);
      await setStore('user_id', res.data.user_id);

      const resAccount = await userAccount();
      console.log(resAccount);

      if (resAccount.code === 1000) {
        await dispatch(editUser(resAccount.data));
        navigation.navigate('MainTabs');
      } else {
        Alert.alert('提示', '获取用户信息失败！');
      }
    } else {
      Alert.alert('登录失败', '用户名或密码不正确！');
    }
  };

  useEffect(() => {
    console.log('1111');
    async function getStoreAccount() {
      const storeAccount = await getStore('account');
      console.log(storeAccount);
      if (storeAccount) {
        setAccount(storeAccount);
      }
    }
    getStoreAccount();
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.logo}>
        <Image style={styles.tinyLogo} source={logoImage} />
      </View>
      <Text style={styles.accountLabel}>登入帳號</Text>
      <View style={styles.account}>
        <TextInput
          style={styles.accountInput}
          onChangeText={text => setAccount(text)}
          value={account}
        />
      </View>
      <Text style={styles.accountLabel}>登入密碼</Text>
      <View style={styles.account}>
        <TextInput
          style={styles.accountInput}
          textContentType="password"
          onChangeText={text => setPassword(text)}
          value={password}
        />
      </View>
      <View style={styles.remember}>
        <Switch onValueChange={toggleSwitch} value={isEnabled} />
        <Text style={styles.rememberText}>記住我的帳號</Text>
      </View>

      <View style={styles.buttons}>
        <View style={styles.register}>
          <Button
            title="我要開戶"
            color="#999999"
            onPress={() => navigation.navigate('RegisterScreen')}
          />
        </View>
        <View style={styles.login}>
          <Button title="登入" color="#ff9800" onPress={() => loginHandle()} />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 40,
    paddingLeft: 50,
    paddingRight: 50,
  },
  logo: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 10,
  },
  tinyLogo: {
    width: 280,
    height: 114,
  },
  accountLabel: {
    fontWeight: '800',
    marginTop: 20,
    lineHeight: 40,
  },
  account: {
    height: 40,
  },
  accountInput: {
    height: 40,
    borderColor: '#acacac',
    borderWidth: 1,
    backgroundColor: 'white',
  },
  remember: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    marginTop: 20,
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    marginTop: 20,
  },
  register: {
    width: 100,
    marginRight: 40,
  },
  login: {
    width: 100,
  },
});

// 3. select函数
function select(state) {
  console.log(state);
  // state
  return {
    user: state.user,
  };
}

export default connect(select)(Login);
